@mixin button-variant($color, $background, $border) {
    $active-background: darken($background, 10%);
    $active-border: darken($border, 12%);

    color: $color;
    background-color: $background;
    border-color: $border;

    &:hover,
    &:active{
        color: $color;
        background-color: $active-background;
        border-color: $active-border;
    }

    &:focus{
        box-shadow: 0 0 0 2px rgba($border, .5);
    }

    &:disabled {
        background-color: $background;
        border-color: $border;
        cursor: not-allowed;
    }
}

.button{
    display: inline-block;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    padding: 1em, 0.5em;
    @include border-radius($border-radius);
    @include hover-focus{
        text-decoration: none;
    };
    @include button-variant($theme-color-main, $theme-color-background, $theme-color-sub);
}